{% extends "main.html" %}
{% block title %}Create HIT Template{% endblock %}
{% block head %}
<script type="text/javascript" src="/js/tabs.js"></script>
<script type="text/javascript" src="/js/HITPreview.js"></script>
<script type="text/javascript" src="/js/HitTemplateSelector.js"></script>
{% endblock %}

{% block pageHeader %}
{% include "templates/navigation.html" %}
{% endblock %}

{% block content %}
<h1>Create HIT Template</h1>
<div class="tabs">
    <ul class="tabsNav">
        <li class="selected"><a class="step1" href="#tab-1"><span>Enter Properties</span></a></li>
        <li><a class="step2" href="#tab-2"><span>Design Layout</span></a></li>
        <li><a class="step3" href="#tab-3"><span>Preview and Finish</span></a></li>
    </ul>
    <div id="tab-1" class="panel">
        {% include "templates/HITPropertiesSetting.html" %}
    </div>
    <div id="tab-2" class="panel">
        {% include "templates/HITDesignForm.html" %}
    </div>
    <div id="tab-3" class="panel">
        <iframe name="HITPreview" width="100%" frameborder="0" scrolling="no">
        </iframe>
    </div>
</div>
{% endblock %}

{% block footer %}
{% include "templates/copyright.html" %}
{% endblock %}